//index.js
//获取应用实例
var app = getApp()
var that;
var deltaX = 0;
var minValue = 1;
Page({
  data: {
    width: 0,
    height: 0,
    lighttext:'',
    temptext:''
  },
  //事件处理函数
  sliderChangeLight:function(e){
    this.setData({
      lighttext:e.detail.value
    })
  },
  sliderChangeTemp:function(e){
    this.setData({
      temptext:e.detail.value
    })
  },
  onLoad: async function (options) {
    var that = this;
    app.globalData.isNoBind = false;
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function (userInfo) {
      //更新数据
      that.setData({
        userInfo: userInfo,
      })
    });

    wx.getSystemInfo({
      success: function (res) {
      	console.log(res);
        that.width = res.windowWidth
        that.height = res.windowHeight*0.7*0.8;
        console.log(that.height)
      }
    })
  },
  onReady: function () {
    console.log(this)
    this.drawMeter('Temp',"30",'40');
    this.drawAnotherMeter('light',"404","700");
    this.drawTarget('filter','65','100');
    this.drawTarget('fishFood','38','100');
    this.drawTarget('PH','41','100')
  },
  // 温度仪表盘,此处的温度仪表盘是内层仪表盘，非数值仪表
  drawMeter: function (name,value,maxvalue) {
    const ctx = wx.createCanvasContext(name);
    var width = this.width;
    var height = this.height;
    var R = width / 2 - 90;
    console.log(width + '.....' + height);
    ctx.clearRect(0, 0, width, height); //清除画布   
    
    //绘制圆
    ctx.beginPath(); //画笔开始            
    ctx.setLineWidth(2); //设置画笔的线宽    
    ctx.setStrokeStyle('#576e87'); //设置画笔的颜色
    ctx.setLineCap('round');
    ctx.arc(width / 4, height / 2, 0.8*R, 1.5 * Math.PI, 3.5 * Math.PI, false); //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针     
    ctx.stroke(); //绘图
    ctx.closePath(); //结束画布 
   
    //绘制数值仪表盘
    ctx.setLineWidth(4); //设置画笔的线宽 
    ctx.beginPath(); //画笔开始           
    ctx.setLineJoin('round');
    ctx.setStrokeStyle('#04e7f9'); //设置画笔的颜色
    ctx.arc(width/4, height / 2, 0.8*R, 1.5 * Math.PI, (value * 2 / maxvalue + 1.5) * Math.PI, false); //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针     
    ctx.stroke(); //绘图            
    ctx.closePath(); //结束画布   
			//设置中间字体
    ctx.setFillStyle('#3a5463');
    ctx.setFontSize(25);
    ctx.setTextAlign('center');
    ctx.fillText('水温', width / 4, height / 2-30);
    
    ctx.setFillStyle('#29ecfc');
    ctx.setFontSize(40);
    ctx.fillText(value, width / 4-10, height / 2+18);
    
    ctx.setFillStyle('#2ab0be');
    ctx.setFontSize(15);
    ctx.fillText('℃', width / 4+25, height / 2-10);
    
    ctx.setFillStyle('#9eb4ca');
    ctx.setFontSize(15);
    ctx.fillText('适宜', width / 4+30, height / 2+30);
    ctx.draw();
    
  
  },
  drawAnotherMeter:function(name,value,maxvalue){ const ctx = wx.createCanvasContext(name);
    var width = this.width;
    var height = this.height;
    var R = width / 2 - 90;
    console.log(width + '.....' + height);
    ctx.clearRect(0, 0, width, height); //清除画布   
    
    //绘制圆
    ctx.beginPath(); //画笔开始            
    ctx.setLineWidth(2); //设置画笔的线宽    
    ctx.setStrokeStyle('#576e87'); //设置画笔的颜色
    ctx.setLineCap('round');
    ctx.arc(width / 4, height / 2, 0.8*R, 1.5 * Math.PI, 3.5 * Math.PI, false); //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针     
    ctx.stroke(); //绘图
    ctx.closePath(); //结束画布 
   
    //绘制数值仪表盘
    ctx.setLineWidth(4); //设置画笔的线宽 
    ctx.beginPath(); //画笔开始           
    ctx.setLineJoin('round');
    ctx.setStrokeStyle('#04e7f9'); //设置画笔的颜色
    ctx.arc(width/4, height / 2, 0.8*R, 1.5 * Math.PI, (value * 2 / maxvalue + 1.5) * Math.PI, false); //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针     
    ctx.stroke(); //绘图            
    ctx.closePath(); //结束画布   
			//设置中间字体
    ctx.setFillStyle('#3a5463');
    ctx.setFontSize(25);
    ctx.setTextAlign('center');
    ctx.fillText('亮度', width / 4, height / 2-30);
    
    ctx.setFillStyle('#29ecfc');
    ctx.setFontSize(40);
    ctx.fillText(value, width / 4-10, height / 2+18);
    
    ctx.setFillStyle('#2ab0be');
    ctx.setFontSize(15);
    ctx.fillText('lux', width / 4+35, height / 2-10);
    
    ctx.setFillStyle('#9eb4ca');
    ctx.setFontSize(15);
    ctx.fillText('适宜', width / 4+30, height / 2+30);
    ctx.draw();},
	drawTarget:function(name,value,maxvalue){
		const ctx = wx.createCanvasContext(name);
		var width = this.width*0.33*0.8;
    var height = 80;
    var R = height / 2 - 5;
    console.log(width + '.....' + height + '.....' + R);
    ctx.clearRect(0, 0, width, height); //清除画布   
    //绘制圆
    ctx.beginPath(); //画笔开始            
    ctx.setLineWidth(2); //设置画笔的线宽    
    ctx.setStrokeStyle('#8cb1d5'); //设置画笔的颜色
    ctx.setLineCap('round');
    ctx.arc(width / 2, height / 2, R, 1.5 * Math.PI, 3.5 * Math.PI, false); //绘制圆形，坐标width / 2,height / 2 半径1.5R，整圆（0-360度），false表示顺时针     
    ctx.stroke(); //绘图
    ctx.closePath(); //结束画布 
   
    //绘制value值的弧度
    ctx.setLineWidth(4); //设置画笔的线宽 
    ctx.beginPath(); //画笔开始           
    ctx.setLineJoin('round');//设置线条的交点样式
    ctx.setStrokeStyle('#9eb4ca'); //设置画笔的颜色
    ctx.arc(width / 2, height / 2, R - 2, 1.5 * Math.PI, (value * 2 / maxvalue + 1.5) * Math.PI, false); //绘制圆形，坐标width / 2,height / 2 半径R - 2，整圆（0-360度），false表示顺时针     
    ctx.stroke(); //绘图        
    ctx.closePath(); //结束画布  
    
    ctx.setFillStyle('#C7ECFA');
    ctx.setFontSize(18);
    ctx.setTextAlign('center');
    ctx.fillText(value, width / 2, height / 2+5);
    
    ctx.draw();
	}
})